import request from "@/utils/request";
import { PlusOutlined } from "@ant-design/icons";
import { Button, DatePicker, Input, message, Modal } from "antd";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import SelectGoods from '@/components/SelectGoods'
import { EditorFormProps } from "../declare";
import styles from './style.less';



export function useShopEditor(props: EditorFormProps) {
  const [selectGoodsVisible, setSelectGoodsVisible] = useState(false);
  // const [list, setList] = useState([]);


  const handleAdd = useCallback(() => {
    setSelectGoodsVisible(true);
  }, [])

  const handleClose = useCallback(() => {
    setSelectGoodsVisible(false);
  }, [])

  const handleSelected = useCallback((goods: any[]) => {
    handleClose()
    const newVal = props.value || {}
    newVal.strcutData = goods
    newVal.value = goods.map(ts => ts.id)
    props.onChange(newVal)
  }, [props])

  const handleRemove = useCallback((item) => {
    Modal.confirm({
      title: '系统提示',
      content: '真的要移除吗?',
      onOk: () => {
        const newVal = props.value || {}
        const idx = newVal.strcutData.findIndex(tx => tx.id === item.id)
        if (idx > -1) {
          newVal.strcutData.splice(idx, 1)
        }
        props.onChange({
          ...newVal
        })
      }
    })
  }, [])




  // const handleLayout = useCallback()

  return {
    selectGoodsVisible,
    setSelectGoodsVisible,
    handleAdd,
    handleSelected,
    handleClose,
    handleRemove
  }
}


/**
 * 公告编辑器
 * @param props 
 */
export function ShopEditor(props: EditorFormProps) {

  const { handleAdd, handleSelected, selectGoodsVisible, handleClose, handleRemove } = useShopEditor(props)
  return (
    <div className={styles["notice-editor"]}>
      <div className={styles["notice-editor-item"]}>
        <div className={styles["notice-editor-item-label"]}>
          栏目名称
        </div>
        <div className={styles["notice-editor-item-value"]}>
          <Input
            placeholder="请输入"
            className={styles["notice-editor-item-input"]}
            value={props.value?.layoutName}
            onChange={v => {
              props.onChange({
                ...props.value,
                layoutName: v.target.value
              })
            }}
          />
        </div>
      </div>
      {props.isToday && [
        <div className={styles["notice-editor-item"]}>
          <div className={styles["notice-editor-item-label"]}>
            开始时间
          </div>
          <div className={styles["notice-editor-item-value"]}>
            <DatePicker
              placeholder="请输入"
              format="YYYY-MM-DD HH:mm:ss"
              showTime
              className={styles["notice-editor-item-input"]}
              value={props.value?.startTime}
              style={{ width: '100%' }}
              onChange={v => {
                props.onChange({
                  ...props.value,
                  startTime: v
                })
              }}
            />
          </div>
        </div>,
        <div className={styles["notice-editor-item"]}>
          <div className={styles["notice-editor-item-label"]}>
            结束时间
          </div>
          <div className={styles["notice-editor-item-value"]}>
            <DatePicker
              format="YYYY-MM-DD HH:mm:ss"

              placeholder="请输入"
              className={styles["notice-editor-item-input"]}
              value={props.value?.endTime}
              style={{ width: '100%' }}
              showTime
              onChange={v => {
                props.onChange({
                  ...props.value,
                  startTime: v
                })
              }}
            />
          </div>
        </div>]
      }
      <div className={styles["notice-editor-item"]}>
        <div className={styles["notice-editor-item-label"]}>
          栏目商品
          <Button type="link" icon={<PlusOutlined />} onClick={handleAdd}  >新建</Button>
        </div>
        <div className={styles["notice-editor-item-value"]}>
          <main className={styles['shop-editor-item-content']}>
            {
              props.value?.strcutData?.map(god => {
                return (
                  <div className={styles["good-item"]}>
                    <div className={styles["good-item-img"]}>
                      <img src={god.main_pic} />
                    </div>
                    <div className={styles["good-item-content"]}>
                      <h4 className={styles["good-item-title"]}>{god.name}</h4>
                      <p className={styles["good-item-price"]}>￥{god.price}</p>
                      <p className={styles["good-item-m-price"]}>￥{god.market_price}</p>
                      <a className={styles["good-item-remove"]} onClick={() => handleRemove(god)}>移除</a>
                    </div>
                  </div>
                )
              })
            }
          </main>
        </div>
      </div>
      {
        selectGoodsVisible &&
        <SelectGoods
          onCancel={handleClose}
          goodsIds={props.value?.value}
          onOk={async (goods) => {
            console.log(goods, 'goods');
            handleSelected(goods);
            // const { code } = await addMarketGoods({
            //   marketId: record.id,
            //   goods
            // });
            // if (code === 0) {
            //   // ref.current.reload();
            //   message.success('绑定成功');
            //   setSelectGoodsVisible(false);
            // }
          }}
        />
      }
    </div>
  )
}